<template>

  <div>
    <div class="mx">
      <van-nav-bar title="首页"></van-nav-bar>
    </div>
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-bind:src="image" width="400px">
        </van-swipe-item>
      </van-swipe>

      <van-notice-bar
        text="中北大学春季招聘会即将开始，请同学们做好相关准备"
        left-icon='./../assets/notice.png'></van-notice-bar>

      <div v-for="i in tests">
        <!--<div class="card" @click="readWork(i.pagesId)">-->
        <div v-bind:class="[i.isDone?'card':'cardyb']" @click="readWork(i.pagesId,i.isDone)">
          <div class="classname"><b>
            <van-icon name="description"></van-icon>
            <b class="setcname">网页制作({{i.pagesId}})</b></b></div>
          <div><b>
            <van-icon name="question" class="sicon"></van-icon>
          </b><font class="setcname">马巧梅 18235462547</font></div>
          <div>
            <van-icon name="clock" class="sicon"></van-icon>
            <font class="setcname">{{i.startTime}}-{{i.endTime}}</font></div>
        </div>
      </div>

    </div>

    <div class="navbar">
      <nav-tab-bar></nav-tab-bar>
    </div>

  </div>

</template>

<script>
  import NavTabBar from "./NavTabBar";
  import "vant/lib/vant-css/icon-local.css";
  // import * as cordova from "E:/SClass/smartclass/node_modules/cordova-plugin-device";
  export default {
    name: "index",
    data() {
      return {
        images: [
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg"
        ],
        active: 0,
        noticeIcon: "./../assets/notice.png",
        tests: [],
        refresh: true,
        studentId: 0,
        classId: true,
        check: []
      };
    },
    components: {NavTabBar},
    beforeCreate() {
      let classId = this.$route.query.idclass;
      if (classId === '') {
        this.classId = false
        this.msg = true
      }

      this.$http.get('page/listPagesByClassId', {
        params: {
          'classId': JSON.parse(window.localStorage.getItem('user')).classId
        }
      })
        .then(res => {
          for (let i = 0; i < res.data.data.length; i++) {
            const test = {"pagesId": "", "startTime": "", "endTime": "", "isDone": false};
            const timeNow = new Date().getTime();
            test.pagesId = res.data.data[i].pagesId;
            test.startTime = this.timestampToTime(res.data.data[i].startTime);
            test.endTime = this.timestampToTime(res.data.data[i].endTime);
            this.$http.post('page/verifyPage', {
                'pageId': res.data.data[i].pagesId,
                'studentId': JSON.parse(window.localStorage.getItem("user")).id
              },
              {
                emulateJSON: true
              }).then(resq => {
              if (resq.data.code !== 200) {
                test.isDone=true;
              }
            })
              .catch(e => {
                test.isDone=true;
              });
            // cordova.plugins.notification.local.schedule([{
            //   id: 1,
            //   title: '应用提醒1',
            //   text: '应用提醒内容1',
            //   at: new Date()
            // }, {
            //   id: 2,
            //   title: '应用提醒2',
            //   text: '应用提醒内容2',
            //   at: new Date(new Date().getTime() + 1000 * 3)
            // }]);
            if (timeNow < res.data.data[i].endTime) {
              this.tests.push(test)
            }
          }
          console.log(res)
        }).catch(err => {
        console.log(err)
      })
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      })
      if (this.refresh === true) {
        this.$nextTick(function () {
          clearTimeout()
        })
        this.refresh = false
      }

    },
    methods: {
      reloade: function () {
        location.reload()
      },
      timestampToTime: function (timestamp) {
        const date = new Date(timestamp);
        return date.toLocaleString()
      },

      readWork(id,Done) {
        this.$router.push({
          path: '/showMsg',
          query: {
            pageId: id,
            classId: JSON.parse(window.localStorage.getItem('user')).classId,
            isDone:Done
          }
        })

      }
    }
  }
  ;


</script>

<style scoped>
  .mx {
    width: 100%;
    height: 100%;
  }

  .navbar {
    margin-top: 20%;
  }

  .card {
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 7px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-top: 5px;
    color: rgb(100, 100, 100);
    border-right: 10px solid rgb(43, 255, 0);
  }

  .cardyb {
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 7px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-top: 5px;
    color: rgb(100, 100, 100);
    border-right: 10px solid rgb(255, 26, 28);
  }

  .classname {
    padding: 0 0 3px 0;
    font-size: 20px;
  }

  .setcname {
    padding-left: 5px;
  }

  .sicon {
    color: rgb(22, 145, 216);
  }

</style>
